<template>
    <el-dialog v-model="isShow" title="选择引用数据" width="80%" :z-index="10000">
        <Table ref="tableRef" @row-click="rowClick" @selection-change="handleSelectionChange"></Table>

        <el-dialog v-model="isShowSku" title="修改商品SKU" width="80%" :z-index="10001">
            <div style="padding: 20px;">
                <el-table :data="sku_list">
                    <el-table-column align="center" property="sku_title" label="商品标题" />
                    <el-table-column align="center" label="封面">
                        <template #default="scope">
                            <el-image
                                :src="scope.row.thumb"
                                fit="cover"
                                class="w-20 h-20"
                                :preview-src-list="[scope.row.thumb]"
                                preview-teleported
                                hide-on-click-modal
                            ></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="数量">
                        <template #default="scope">
                            <el-input
                                v-model="scope.row.quantity"
                                style="width: 150px"
                                placeholder="请输入数量"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="单价">
                        <template #default="scope">
                            <el-input
                                v-model="scope.row.univalence"
                                style="width: 150px"
                                placeholder="请输入单价"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" width="80">
                        <template #default="scope">
                            <el-button
                                size="small"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)"
                                >
                            删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <template #footer>
                <el-button @click="isShowSku = false"><el-icon class="mr-1 text-slate-500">
                    <CloseBold />
                </el-icon> 取消</el-button>
                <el-button type="primary" :icon="Plus" @click="handleSaveSku">保存</el-button>
            </template>
        </el-dialog> 
        <template #footer>
            <el-button @click="isShow = false"><el-icon class="mr-1 text-slate-500">
                <CloseBold />
            </el-icon> 取消</el-button>
            <el-button type="primary" :icon="Plus" @click="handleSave">添加</el-button>
        </template>
    </el-dialog>
</template>
<script setup>
import { baTableApi } from '/@/api/common'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'
import { Plus , CloseBold } from '@element-plus/icons-vue'

import { ref, watch , onMounted , provide, reactive } from 'vue'
import createAxios from '/@/utils/axios'
// import { inputNumber } from '/@/utils/tools'
const emits = defineEmits(['addProduct'])
let isShow = ref(false) //添加商品弹窗
let isShowSku =  ref(false) //修改sku弹窗
let allData = ref([]) //当前页面所有的数据
let data = ref([]) //所有选择的表单
let addData = ref([]) //要添加的行
let edit_id = ref(null) 
let sku_list = reactive([]) //要编辑的sku列表

const props = defineProps({
    modelValue: Boolean,
    purchaserList: Array,
    data: Array
})

watch(
    () => props.modelValue,
    (newVal) => {
        isShow.value = newVal;
    }
);

//表格选中行
const handleSelectionChange = (val) => {
    console.log(val, "val");
    addData = val
}

//表格点击行
const rowClick = (val) => {
    console.log(val.skus,"val.skus");
    edit_id.value = val.id
    sku_list = val.skus
    sku_list.forEach(item => {
        Reflect.set(item, 'quantity', '')
        Reflect.set(item, 'univalence', '')
    })
    isShowSku.value = true
    console.log(sku_list,"sku_list");
}

const handleDelete = (index, row) => {
    sku_list.splice(index,1)
}

const tableRef = ref()

/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/admin/wms.Products/'),
    {
        pk: 'id',
        column: [
            {
                width: 50,
                type: 'selection',
                align: 'center',
            }, {
                label: '商品标题',
                prop: 'title',
                align: 'center',
            }, {
                label: '单个备注',
                prop: 'remark',
                align: 'center',
            }, {
                label: '实际数量',
                prop: 'actual_quantity',
                align: 'center',
            }, {
                label: '采购单价',
                prop: 'price',
                align: 'center',
            },
        ],
        dblClickNotEditColumn: [undefined],
    },
    {
        defaultItems: {},
    }
)


// let filter = ref(baTable.table.filter)
provide('baTable', baTable)

//保存操作
const handleSave = () => {
    data.value = [...data.value,...addData] //添加
    data.value = [...new Set(data.value)] //去重
    emits('addProduct', data)
    isShow.value = false
}
//保存修改的Sku数据
const handleSaveSku = () => {
    console.log(edit_id.value,"edit_id.value");
    console.log(allData.value,"allData.value");
    let resultIndex = allData.value.findIndex(item => {
        return item.id = edit_id.value
    })
    console.log(resultIndex,"resultIndex");
   
    allData.value[resultIndex].skus = sku_list
    console.log(allData.value,"allData.value");
    isShowSku.value = false
}

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
        allData.value = baTable.table.data
        console.log(allData.value,'allData');
    })
})

</script>
